<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:include page="sys_html_header.jsp" />



<!--TAB MENU-->
<script src="js/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('.form-reversation').tabs();
    });
</script>
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->

<!--checkbox show/hide-->
<script type="text/javascript">
    function dropoff_form(){
        var dropoff = document.getElementById('dropoff');
        if(dropoff.checked == true){
            document.getElementById('form-dropoff').style.display = "";
        }else{
            document.getElementById('form-dropoff').style.display = "none";
        }

    }
    function coupon_form(){
        var coupon = document.getElementById('coupon');
        if(coupon.checked == true){
            document.getElementById('coupon_form').style.display = "";
        }else{
            document.getElementById('coupon_form').style.display = "none";
        }

    }
</script>
<!--Slide up feedback content-->
<script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $(".detail-feedback").jCarouselLite({
            vertical: true,
            hoverPause:true,
            visible: 2,
            auto:800,
            speed:3000
        });
    });
</script>
<!--FUNCTION JCAROUSEL NEXT CONTENT-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
<link rel="stylesheet" type="text/css" href="skins/ie7/skin-other.css" />
<script type="text/javascript">

    function mycarousel_initCallback(carousel)
    {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };

    jQuery(document).ready(function() {
        jQuery('.first-and-second-carousel').jcarousel({
            auto: 5,
            scroll: 1,
            wrap: 'circular',
            speed:3000
        });
        jQuery('.first-and-second-carousel2').jcarousel({
            auto: 8,
            scroll: 1,
            wrap: 'circular',
            speed:3000

        });
    });

</script>



<!--start container-->
<div id="container">
    <jsp:include page="sys_header.jsp" />

    <!--start content-->
    <div id="content">
        <div class="main-form">
            <div class="about">
                <p><strong>Bangkok Airporter</strong> officially provides private airport transfer with door to door service between Suwannabhumi International Airport and all major business points in Bangkok area and territories, including all destinations in Thailand as client's requirement. <br/>
                    <br/>
                    With serving many years of <strong>Thailand limousine service</strong> to all properties such as well known hotels, serviced apartment, neighborhoods, major transportation terminals and multi-national companies, we provide comfortable, luxurious and modern vehicles with reliable, convenient and economical service in limousine and transfer.
                </p>
            </div>
            <!--end about-->
            <div class="form-reversation">
                <ul class="tabs-nav">
                    <li><a href="#fragment-1"><span class="reservation"></span></a></li>
                    <li><a href="#fragment-2"><span class="tour"></span></a></li>
                    <li><a href="#fragment-3"><span class="cancel"></span></a></li>
                </ul>
                <div id="fragment-1">
                    <div class="box">
                        <table>
                            <tr>
                                <td colspan="2"><strong>Pick-up location :</strong></td>
                                <td colspan="2"><input type="checkbox" name="Drop-off" id="dropoff" onClick="dropoff_form();"/>
                                    Drop-off at a different location?</td>
                            </tr>
                            <tr>
                                <td colspan="4"><input type="text" size="80" /></td>
                            </tr>
                            <tr>
                                <td colspan="4"><div id="form-dropoff" style="display:none">
                                        <table>
                                            <tr>
                                                <td><strong>Drop-off location:</strong></td>
                                            </tr>
                                            <tr>
                                                <td><input type="text" size="80" /></td>
                                            </tr>
                                        </table>
                                    </div></td>
                            </tr>
                            <tr>
                                <td colspan="2"><strong>Pick-up date :</strong></td>
                                <td colspan="2"><strong>Pick-off date :</strong></td>
                            </tr>
                            <tr>
                                <td width="24%"><input type="text" size="12" style="height:25px; line-height:25px;" />
                                    <img src="images/ic_date.png" /></td>
                                <td width="22%"><div class="box-time">
                                        <div class="hour">
                                            <select id="step1submit_checkoutHour" class="time1" name="checkoutHour" onmousedown="if(this.options.length>10){this.size=10;}" onchange="this.size=0;" onblur="this.size=0;">
                                                <option value="0">12 AM</option>
                                                <option value="1">1 AM</option>
                                                <option value="2">2 AM</option>
                                                <option value="3">3 AM</option>
                                                <option value="4">4 AM</option>
                                                <option value="5">5 AM</option>
                                                <option value="6">6 AM</option>
                                                <option value="7">7 AM</option>
                                                <option value="8">8 AM</option>
                                                <option value="9">9 AM</option>
                                                <option selected="selected" value="10">10 AM</option>
                                                <option value="11">11 AM</option>
                                                <option value="12">12 PM</option>
                                                <option value="13">1 PM</option>
                                                <option value="14">2 PM</option>
                                                <option value="15">3 PM</option>
                                                <option value="16">4 PM</option>
                                                <option value="17">5 PM</option>
                                                <option value="18">6 PM</option>
                                                <option value="19">7 PM</option>
                                                <option value="20">8 PM</option>
                                                <option value="21">9 PM</option>
                                                <option value="22">10 PM</option>
                                                <option value="23">11 PM</option>
                                            </select>
                                            <select  class="time2" name="" onmousedown="if(this.options.length>10){this.size=10;}" onchange="this.size=0;" onblur="this.size=0;">
                                                <option value="0" selected="selected">:00</option>
                                                <option value="15">:15</option>
                                                <option value="30">:30</option>
                                                <option value="45">:45</option>
                                            </select>
                                        </div> <!--end hour-->
                                    </div></td>
                                <td width="24%"><input type="text" size="12" style="height:25px; line-height:25px;" />
                                    <img src="images/ic_date.png" /></td>
                                <td width="30%"><div class="box-time">
                                        <div class="hour">
                                            <select id="step1submit_checkoutHour" class="time1" name="checkoutHour" onmousedown="if(this.options.length>10){this.size=10;}" onchange="this.size=0;" onblur="this.size=0;">
                                                <option value="0">12 AM</option>
                                                <option value="1">1 AM</option>
                                                <option value="2">2 AM</option>
                                                <option value="3">3 AM</option>
                                                <option value="4">4 AM</option>
                                                <option value="5">5 AM</option>
                                                <option value="6">6 AM</option>
                                                <option value="7">7 AM</option>
                                                <option value="8">8 AM</option>
                                                <option value="9">9 AM</option>
                                                <option selected="selected" value="10">10 AM</option>
                                                <option value="11">11 AM</option>
                                                <option value="12">12 PM</option>
                                                <option value="13">1 PM</option>
                                                <option value="14">2 PM</option>
                                                <option value="15">3 PM</option>
                                                <option value="16">4 PM</option>
                                                <option value="17">5 PM</option>
                                                <option value="18">6 PM</option>
                                                <option value="19">7 PM</option>
                                                <option value="20">8 PM</option>
                                                <option value="21">9 PM</option>
                                                <option value="22">10 PM</option>
                                                <option value="23">11 PM</option>
                                            </select>
                                            <select  class="time2" name="" onmousedown="if(this.options.length>10){this.size=10;}" onchange="this.size=0;" onblur="this.size=0;">
                                                <option value="0" selected="selected">:00</option>
                                                <option value="15">:15</option>
                                                <option value="30">:30</option>
                                                <option value="45">:45</option>
                                            </select>
                                        </div> <!--end hour-->
                                    </div></td>
                            </tr>
                            <tr>
                                <td colspan="4"><hr /></td>
                            </tr>
                            <tr>
                                <td colspan="2"><input type="checkbox" name="coupon" id="coupon" onClick="coupon_form();"/>
                                    I have a coupon or member number</td>
                                <td colspan="2"><div id="coupon_form" style="display:none"><b>Coupon code :</b>
                                        <input type="text" />
                                    </div></td>
                            </tr>
                            <tr>
                                <td colspan="4"><input type="checkbox"/>
                                    Log in to save time or <a href="#">register</a></td>
                            </tr>
                            <tr>
                                <td colspan="4"><table>
                                        <tr>
                                            <td width="13%"><b>Username : </b></td>
                                            <td width="27%"><input type="text" /></td>
                                            <td width="12%"><b>Password :</b></td>
                                            <td width="48%"><input type="password"/>
                                                <a href="#">Forgotten password?</a></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>&nbsp;</td>
                                            <td></td>
                                            <td align="right"><a href="select-car.jsp" class="find-car"></a></td>
                                        </tr>
                                    </table></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <!--end box-->
                </div> <!--end fragment-1-->
                <div id="fragment-2">
                    <div class="box">
                        <table>
                            <tr>
                                <td>Not available</td>
                            </tr>
                        </table>
                    </div>
                </div> <!--end fragment-2-->
                <div id="fragment-3">
                    <div class="box">
                        <table>
                            <tr>
                                <td colspan="2"> Reservations made through bangkokairporter.com may be viewed, change or cancelled by entering the following information. A confirmation of the reservation was sent to the email address entered during reservation. </td>
                            </tr>
                            <tr>
                                <td width="22%"><b>Reservation no :</b></td>
                                <td width="78%"><input type="text" /></td>
                            </tr>
                            <tr>
                                <td><b>Last Name :</b></td>
                                <td><input type="text" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="right"><a href="#" class="find-reser"></a></td>
                            </tr>
                        </table>
                    </div> <!--end box-->
                </div> <!--end fragment-3-->
            </div> <!--end form-reversation-->
        </div>
        <!--end main-->
        <div class="shortcut">
            <div class="detail-content">
                <div class="information">
                    <ul>
                        <li class="exchange"><a href="http://www.xe.com/ucc/#rates" rel="nofollow" target="_blank"></a></li>
                        <li class="flight"><a href="http://www.suvarnabhumiairport.com/flight_schedule_passenger_arrival_en.php" rel="nofollow" target="_blank"></a></li>
                    </ul>
                </div> <!--end information-->
                <div class="banner">
                    <div class="thumbnail">
                        <ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
                            <li><img src="images/banner_01.jpg" alt="" /></li>
                            <li><img src="images/banner_02.jpg" alt="" /></li>
                            <li><img src="images/banner_03.jpg" alt="" /></li>
                            <li><img src="images/banner_04.jpg" alt="" /></li>
                        </ul>
                    </div>
                    <!--end thumbnail-->
                </div>
                <!--end banner-->
            </div>
            <!--end detail-content-->
            <div class="guarantee">
                <ul>
                    <li><img src="images/ic_24hours.png" alt="" />Available 24 hours a day</li>
                    <li><img src="images/ic_profess.png" alt="" />Ensure the highest professional service</li>
                    <li><img src="images/ic_newcar.png" alt="" />New car replacement </li>
                    <li><img src="images/ic_risk.png" alt="" />Burden and the risk-free debris from the car</li>
                </ul>
            </div>
            <!--end guarantee-->
        </div>
        <!--end shortcut-->
        <div class="portlet">
            <ul>
                <li>
                    <div class="col-locations">
                        <div class="title"><img src="images/txt_locations.png" alt="find locations" /></div>
                        <!--end title-->
                        <div class="detail"><a href="location.jsp"><img src="images/ex_map.png"/></a></div>
                        <!--end detail-->
                    </div>
                </li>
                <li>
                    <div class="col-service">
                        <div class="title"><img src="images/txt_service.png" alt="find locations" />
                            <div class="view-all"><a href="car.jsp"><img src="images/ic_list.png" alt="view-all" title="view all" /></a></div>
                        </div>
                        <!--end title-->
                        <div class="detail-car">
                            <ul id="second-carousel" class="first-and-second-carousel2 jcarousel-skin-ie71">
                                <li>
                                    <div class="car">
                                        <h2>฿7,000 per/day</h2>
                                        <div class="model">
                                            <span><em><a href="#"><img src="images/btn_booknow.png" alt="Book now" /></a></em><img src="images/car_newcamry.jpg" alt="Toyota New Camry"/></span>
                                            <p><b>Toyota New Camry</b><br/>
                                                Type : Seadan</p>
                                            <ul>
                                                <li class="seat"><span>4</span></li>
                                                <li class="luggage"><span>2</span></li>
                                            </ul>
                                        </div> <!--end model-->
                                    </div> <!--end car-->
                                </li>
                                <li>
                                    <div class="car">
                                        <h2>฿7,000 per/day</h2>
                                        <div class="model">
                                            <span><em><a href="#"><img src="images/btn_booknow.png" alt="Book now" /></a></em><img src="images/car_camry.jpg" alt="Toyota New Camry"/></span>
                                            <p><b>Toyota Camry</b><br/>
                                                Type : Seadan</p>
                                            <ul>
                                                <li class="seat"><span>4</span></li>
                                                <li class="luggage"><span>2</span></li>
                                            </ul>
                                        </div> <!--end model-->
                                    </div> <!--end car-->
                                </li>
                                <li>
                                    <div class="car">
                                        <h2>฿6,000 per/day</h2>
                                        <div class="model">
                                            <span><em><a href="#"><img src="images/btn_booknow.png" alt="Book now" /></a></em><img src="images/van_commuter.jpg" alt="Toyota Van (commuter)"/></span>
                                            <p><b>Toyota Van (Commuter)</b><br/>
                                                Type : Van</p>
                                            <ul>
                                                <li class="seat"><span>10</span></li>
                                                <li class="luggage"><span>5</span></li>
                                            </ul>
                                        </div> <!--end model-->
                                    </div> <!--end car-->
                                </li>
                                <li>
                                    <div class="car">
                                        <h2>฿8,000 per/day</h2>
                                        <div class="model">
                                            <span><em><a href="#"><img src="images/btn_booknow.png" alt="Book now" /></a></em><img src="images/van_hiace.jpg" alt="TOYOTA VIP VAN (Hiace)"/></span>
                                            <p><b>Toyota VIP Van (Hiace)</b><br/>
                                                Type : Van</p>
                                            <ul>
                                                <li class="seat"><span>10</span></li>
                                                <li class="luggage"><span>5</span></li>
                                            </ul>
                                        </div> <!--end model-->
                                    </div> <!--end car-->
                                </li>
                            </ul>
                        </div>
                        <!--end detail-car-->
                    </div>
                    <!--end col-service-->
                </li>
                <li>
                    <div class="col-feedback">
                        <div class="title"><img src="images/txt_feedback.png" alt="find locations" />
                            <div class="view-all"><a href="feedback.jsp"><img src="images/ic_list.png" alt="view-all" title="view all" /></a></div>
                        </div>
                        <!--end title-->
                        <div class="detail-feedback">
                            <ul>
                                <li>
                                    <div class="by"><b><span>james</span>says:</b></div>
                                    <div class="comment">good service :) กกกกกกกกกกกกกกกกกกกกกกกกกกกกก</div>
                                </li>
                                <li>
                                    <div class="by"><b><span>james</span>says:</b></div>
                                    <div class="comment">good service :)
                                        ฟกดฟกดฟหกดฟกดฟกดฟกดฟหกดหฟกดฟกหดฟกดหกดหกดหฟกดหกด
                                        dfsdfsdS</div>
                                </li>
                                <li>
                                    <div class="by"><b><span>james</span>says:</b></div>
                                    <div class="comment">good service :)
                                        ฟกดฟกดฟหกดฟกดฟกดฟกดฟหกดหฟกดฟกหดฟกดหกดหกดหฟกดหกดadfasdfadfasdfad
                                        dfsdfsdadsf หกฟดกดฟกดฟด ฟกดหดS</div>
                                </li>
                            </ul>
                        </div> <!--end detail-feedback-->
                    </div> <!--end col-feedback-->
                </li>
            </ul>
        </div>
        <!--end portlet-->
    </div>
    <!--end content-->


    <jsp:include page="sys_footer.jsp" />

</div>
<!--end container-->